<template>
  <div class="layout">
    <!-- 头部 -->
    <router-view class="heard" ></router-view>
  
    <NavBar class="nav" ref="barwidth"></NavBar>

  </div>
</template>

<script setup>
import NavBar from '@/components/NavBar/Index.vue'
import { ref,reactive, onMounted ,computed} from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

let barwidth=ref(null);

let navHeight = ref(0);



onMounted(() => {
  setTimeout(() => {
   navHeight.value=barwidth.value.$el.offsetHeight;
  },1000)


})

</script>
<style scoped lang='css'>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.heard {
  width: 100%;
  flex: 1;

}
.nav {
  position: sticky;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
}
</style>